<template>
  <div>
    <!-- 顶部导航栏 -->
    <div>
      <van-nav-bar title="预定医生" left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="notes" size="18" color="black" @click="router.push('/Booking')" />
        </template>
      </van-nav-bar>
    </div>
    <!--  搜索框  -->
    <van-search
      v-model="value"
      placeholder="找一个医生或专科医生"
      @click="router.push('/Department')"
    />

    <van-swipe :loop="false" :width="220" :show-indicators="false">
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="Specialists">
            <div class="Doctorimg"></div>
            <p>专科医生</p>
          </div>
        </RouterLink>
      </van-swipe-item>
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="Cough">
            <div class="Coughimg"></div>
            <p>咳嗽或发烧</p>
          </div>
        </RouterLink>
      </van-swipe-item>
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="Cardiopathy">
            <div class="Cardiopathyimg"></div>
            <p>心脏病专家</p>
          </div>
        </RouterLink>
      </van-swipe-item>
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="pediatrics">
            <div class="pediatricsimg"></div>
            <p>儿科专家</p>
          </div>
        </RouterLink>
      </van-swipe-item>
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="ocular">
            <div class="ocularimg"></div>
            <p>眼科</p>
          </div>
        </RouterLink>
      </van-swipe-item>
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="breathe">
            <div class="breatheimg"></div>
            <p>呼吸科</p>
          </div>
        </RouterLink>
      </van-swipe-item>
      <van-swipe-item>
        <RouterLink to="/RunningView">
          <div class="dental">
            <div class="dentalimg"></div>
            <p>口腔科</p>
          </div>
        </RouterLink>
      </van-swipe-item>
    </van-swipe>
    <!-- 我的预约 -->
    <div class="booking">
      <span style="font-size: 4vw">我的预约</span>
      <RouterLink to="/SportsView"
        ><span style="font-size: 4vw; color: rgb(149, 134, 251)">查看全部</span>
      </RouterLink>
    </div>
    <ul>
      <li v-for="item in arr" :key="item.id">
        <div>11月21</div>
        <h2>{{ item.yuyue }}</h2>
        <p>{{ item.time }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import router from '@/router'
import { ref } from 'vue'

const onClickLeft = () => history.back()

const value = ref('')

const arr = [{ yuyue: '预约文字', time: '10:30' }]
</script>

<style lang="css">
/* 预约*/
li {
  margin: 0 auto;
  margin-top: 5vw;
  width: 80vw;
  height: 30vw;
  background-color: rgb(149, 134, 251);
  border-radius: 5vw;
}

.booking {
  margin-top: 8vw;
  display: flex;
  justify-content: space-between;
}

/* 专科医生 */
.Specialists {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}

.Specialists > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.Doctorimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/主治医师.png);
}

/* 发烧咳嗽 */
.Cough {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}
.Cough > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.Coughimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/感冒咳嗽.png);
}

/* 心脏病专家 */
.Cardiopathy {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}
.Cardiopathy > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.Cardiopathyimg {
  position: absolute;
  top: 3vw;
  width: 15vw;
  height: 15vw;
  background-image: url(../assets/icon/心脏病专家.png);
}
/* 儿科 */
.pediatrics {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}
.pediatrics > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.pediatricsimg {
  position: absolute;
  top: 3vw;
  width: 15vw;
  height: 15vw;
  background-image: url(../assets/icon/儿科专家.png);
}
/* 眼科 */
.ocular {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}

.ocular > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.ocularimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/眼科.png);
}
/* 呼吸科 */
.breathe {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}

.breathe > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.breatheimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/呼吸科.png);
}
/* 口腔科 */
.dental {
  width: 40vw;
  height: 35vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6vw;
  position: relative;
}

.dental > p {
  color: black;
  position: absolute;
  bottom: 2vw;
  font-size: 4.7vw;
}
.dentalimg {
  position: absolute;
  top: 3vw;
  width: 14vw;
  height: 14vw;
  background-image: url(../assets/icon/牙科.png);
}

.van-swipe-item {
  margin-top: 7vw;
  margin-right: -5vw;
}
</style>
